延續上篇最後提到 Webpack 設置了別名「@」來取代路徑「/src」，然而在模版語法中，「@」則是另外的用途，因此一開始先分辨清楚各自的定義，之後就能運用自如了！本篇這就來簡介兩個最常使用的簡寫代表：「@」、「:」。

「@」v-on：監聽事件

原生 JavaScript 處理監聽事件，要先從 DOM querySelector() 找到目標元素，接著 addEventListener() 將監聽事件註冊到該元素上，當觸發指定事件類型時，再執行 listener callback 函式；這一連串的過程默默締造出好幾行程式碼，但在 Vue.js 則不用這般大費周章，只需要在 <template> 中直接對目標元素加上 v-on 監聽事件類型及觸發事件後的處理函式即可。

像是前陣子突然風靡一時的 POPCAT 點擊大賽，我們也可以做個簡易版的計次器。

• 方法一：直接在 <template> 寫明表達式。

  <h1>{{ clicks }}</h1>
  <button type="button" @click="clicks += 1">Click it!</button>
  

  data() {
    return {
      clicks: 0,
    };
  },
  

• 方法二：透過 methods 調用函式（適用於處理邏輯較繁複時）。

  <h1>{{ clicks }}</h1>
  <button type="button" @click="counter">Click it!</button>
  

  data() {
    return {
      clicks: 0,
    };
  },
  methods: {
    counter() {
      this.clicks += 1;
      if (this.clicks % 50 === 0) {
        alert(`Already ${this.clicks} clicks.`);
      }
    },
  },
  

另外還可以直接在事件類型後方追加「事件修飾符」，且修飾符可被串連著使用。

<a @click.stop.prevent="linkToPage">Link</a>

• Vanilla.js - event.stopPropagation() ⇒ Vue.js - @eventType.stop
  停止事件傳遞
• Vanilla.js - event.preventDefault() ⇒ Vue.js - @eventType.prevent
  阻止事件發生預設行為

「:」v-bind：綁定 attribute

由於 Mustache 語法無法直接作用在 HTML attribute 上，因此需透過 v-bind 進行綁定。觀察模板語法與編譯結果之間的差異，便能了解綁定屬性的運作方式，通則就是只要 attribute 為 true 就能被編譯出來。

• 一般綁定

  <button type="button" :disabled="isUnclickable">
    Cannot click!
  </button>
  

  data() {
    return {
      isUnclickable: true,
    };
  },
  

  編譯結果：因為 isUnclickable 為 true，使得該按鈕無法點擊

  <button type="button" disabled="disabled">
    Cannot click!
  </button>
  

• Object 語法

  <button 
    type="button"
    :class="{ important: isImportant, disable: isUnclickable }"
  >
    Click it!
  </button>
  

  data() {
    return {
  isImportant: true,
      isUnclickable: false,
    };
  },
  

  編譯結果：只有 isImportant 為 true，因此 class 不包含 isUnclickable

  <button type="button" class="isImportant">
    Click it!
  </button>
  

• Array 語法

  <button type="button" :class="[mainClass, disableClass]">
    Click it!
  </button>
  

  data() {
    return {
  	mainClass: "important",
      disableClass: "unclickable",
    };
  },
  

  編譯結果：依序編譯出陣列中所對應的 class name

  <button type="button" class="important unclickable">
    Click it!
  </button>
  

少打幾個程式碼累積起來的時間也是相當可觀的，況且簡寫本身好記又好用，下次看到它們可別再搞混其對應的本尊囉！

參考資料

• Vue.js - Template Syntax - Shorthands
• Vue.js - Event Handling
• Vue.js - Class and Style Bindings